<template>
  <div class="px-[8px] pb-[16px]">
    <cardTitleVue title="全景经开"></cardTitleVue>

    <div class="mt-[8px] h-[141px] flex items-center relative">
      <img src="../../static/v21.png" class="w-[100%] h-[100%] rounded-[10px]" alt="" srcset="" />
      <div class="absolute ml-[24px]">
        <div class="text-[25px] text-[#fff]">经开全景</div>
        <div class="text-[10px] text-[#fff] mt-[12px]">立即查看</div>
      </div>
    </div>

    <cardTitleVue title="发展优势"></cardTitleVue>

    <div class="mt-[8px] h-[141px] flex items-center relative overflow-hidden rounded-[10px]">
      <img src="../../static/v202.svg" class="w-[100%] h-[100%] rounded-[10px]" alt="" srcset="" />
      <img
        src="../../static/v20202.svg"
        class="w-[375px] h-[375px] rounded-[10px] absolute left-[-35%] top-[-150%]"
        alt=""
        srcset=""
      />
      <div class="absolute ml-[24px]">
        <div class="text-[25px] text-[#30B6F9] text-[18px]">人文生态</div>
        <div class="px-[16px]">
          <div
            class="text-[10px] text-[#fff] mt-[12px] px-[4px] py-[4px] rounded-[20px] bg-[#30B6F9] flex items-center justify-center"
          >
            查看
          </div>
        </div>
      </div>

      <div
        class="absolute w-[50px] h-[50px] overflow-hidden flex items-center justify-center right-[16px]"
      >
        <img src="../../static/v2021.svg" class="w-[50px] h-[50px]" alt="" srcset="" />
        <img src="../../static/v2023.svg" class="absolute w-[26px] h-[25px]" alt="" srcset="" />
      </div>
    </div>

    <div class="mt-[8px] h-[141px] flex items-center relative overflow-hidden rounded-[10px]">
      <img src="../../static/v301.svg" class="w-[100%] h-[100%] rounded-[10px]" alt="" srcset="" />
      <img
        src="../../static/v302.svg"
        class="w-[375px] h-[375px] rounded-[10px] absolute left-[-35%] top-[-150%]"
        alt=""
        srcset=""
      />
      <div class="absolute ml-[24px]">
        <div class="text-[25px] text-[#21C09D] text-[18px]">区位交通</div>
        <div class="px-[16px]">
          <div
            class="text-[10px] text-[#fff] mt-[12px] px-[4px] py-[4px] rounded-[20px] bg-[#21C09D] flex items-center justify-center"
          >
            查看
          </div>
        </div>
      </div>

      <div
        class="absolute w-[50px] h-[50px] overflow-hidden flex items-center justify-center right-[16px]"
      >
        <img src="../../static/v303.svg" class="w-[50px] h-[50px]" alt="" srcset="" />
        <img src="../../static/v304.svg" class="absolute w-[26px] h-[25px]" alt="" srcset="" />
      </div>
    </div>

    <div class="mt-[8px] h-[141px] flex items-center relative overflow-hidden rounded-[10px]">
      <img src="../../static/v401.svg" class="w-[100%] h-[100%] rounded-[10px]" alt="" srcset="" />
      <img
        src="../../static/v402.svg"
        class="w-[375px] h-[375px] rounded-[10px] absolute left-[-35%] top-[-150%]"
        alt=""
        srcset=""
      />
      <div class="absolute ml-[24px]">
        <div class="text-[25px] text-[#FC9D68] text-[18px]">营商环境</div>
        <div class="px-[16px]">
          <div
            class="text-[10px] text-[#fff] mt-[12px] px-[4px] py-[4px] rounded-[20px] bg-[#FC9D68] flex items-center justify-center"
          >
            查看
          </div>
        </div>
      </div>

      <div
        class="absolute w-[50px] h-[50px] overflow-hidden flex items-center justify-center right-[16px]"
      >
        <img src="../../static/v403.svg" class="w-[50px] h-[50px]" alt="" srcset="" />
        <img src="../../static/v404.svg" class="absolute w-[26px] h-[25px]" alt="" srcset="" />
      </div>
    </div>

    <cardTitleVue title="重点企业"></cardTitleVue>

    <div class="mt-[8px] h-[220px] flex items-center">
      <div
        class="mt-[8px] flex-1 bg-[#eefbff] mr-[4px] h-[220px] flex flex-col justify-between overflow-hidden rounded-[10px]"
      >
        <div class="ml-[24px] mt-[24px] ml-[12px]">
          <div class="text-[25px] text-[#30B6F9] !text-[20px]">纺织服务业</div>
          <div class="w-[60px]">
            <div
              class="text-[10px] text-[#fff] mt-[12px] px-[4px] py-[4px] rounded-[20px] bg-[#30B6F9] flex items-center justify-center"
            >
              查看
            </div>
          </div>
        </div>

        <div class="flex items-center mb-[24px] mr-[12px] justify-end">
          <img src="../../static/v501.svg" class="w-[88px] h-[59px]" alt="" srcset="" />
        </div>
      </div>

      <div class="ml-[4px] flex-1">
        <div
          class="mt-[8px] bg-[#ccf1e9] mb-[4px] h-[109px] flex items-center relative overflow-hidden rounded-[10px]"
        >
          <div class="absolute ml-[24px]">
            <div class="text-[25px] text-[#22C09D] !text-[13px]">智能制造业</div>
            <div class="">
              <div
                class="text-[10px] text-[#fff] mt-[12px] px-[4px] py-[4px] rounded-[20px] bg-[#22C09D] flex items-center justify-center"
              >
                查看
              </div>
            </div>
          </div>

          <div
            class="absolute flex items-center justify-center right-[16px] p-[6px] overflow-hidden w-[28px] h-[28px] bg-[#88dbc8] rounded-[8px]"
          >
            <img src="../../static/v502.png" alt="" class="w-[100%] h-[100%]" srcset="" />
          </div>
        </div>

        <div
          class="mt-[8px] bg-[#fff4ee] mb-[4px] h-[109px] flex items-center relative overflow-hidden rounded-[10px]"
        >
          <div class="absolute ml-[24px]">
            <div class="text-[25px] text-[#fc9d68] !text-[13px]">现代服务业</div>
            <div class="">
              <div
                class="text-[10px] text-[#fff] mt-[12px] px-[4px] py-[4px] rounded-[20px] bg-[#fc9d68] flex items-center justify-center"
              >
                查看
              </div>
            </div>
          </div>

          <div
            class="absolute flex items-center justify-center p-[6px] right-[16px] overflow-hidden w-[28px] h-[28px] bg-[#eab090] rounded-[8px]"
          >
            <div class="w-[100%] h-[100%] rounded-[50%] bg-[#fc9d68]"></div>
            <img src="../../static/v503.svg" alt="" class="w-[18px] h-[17px] absolute" srcset="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import cardTitleVue from "../../components/cardTitle/index.vue";
</script>

<style>
#u143 {
  border-width: 0px;
  position: absolute;
  left: 30px;
  top: 67px;
  width: 125px;
  height: 29px;
  display: flex;
  font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 25px;
  color: #ffffff;
}
</style>
